<template>
  <div class="layout-wrapper">
    <div class="content" :class="classPrefix &&`${classPrefix}-content`">
      <slot></slot>
    </div>
    <Nav></Nav>
  </div>
</template>

<script lang="ts">
export default {
  props: ['classPrefix'],
  name: 'Layout'
};
</script>

<style lang="scss" scoped>
.layout-wrapper {
  display: flex;
  flex-direction: column;
}


.content {
  overflow-y: auto;
  flex-grow: 1;
}
@media screen and (max-height: 800px){
  .layout-wrapper {
    height: 100vh;
  }
}@media screen and (min-height: 800px){
  .layout-wrapper {
    height: 800px;
  }
}
</style>
